@each $var in 5, 10, 15, 20 {
  $size: $var * 1px;
  .mg-#{$var} {
    margin: $size;
  }
  .mt-#{$var} {
    margin-top: $size;
  }
  .mb-#{$var} {
    margin-bottom: $size;
  }
  .ml-#{$var} {
    margin-left: $size;
  }
  .mr-#{$var} {
    margin-right: $size;
  }

  .pd-#{$var} {
    padding: $size;
  }
  .pt-#{$var} {
    padding-top: $size;
  }
  .pb-#{$var} {
    padding-bottom: $size;
  }
  .pl-#{$var} {
    padding-left: $size;
  }
  .pr-#{$var} {
    padding-right: $size;
  }
}
.bg-white {
  background-color: #fff;
}

.page-card {
  display: flex;
  flex-direction: column;
  height: auto !important;
  max-height: 100% !important;
  overflow: auto;
  padding: 24px 32px;
  background: #f2f1f6;
  @at-root &__content {
    padding: 25px;
    background: #fff;
  }
}

@each $var in left, center, right {
  .text-#{$var} {
    text-align: $var;
  }
}
